<template>
    <div class="JobDetails">
        <!-- 头部 -->
		<Header :navActive="2" ref="Header"/>
		<!-- 主内容区 -->
		<div class="main cl">
			<div class="banner">
                <div class="w1200">
                    <div class="left fl">
                        <div class="title">{{info.jobName}}</div>
                        <div class="other">
                            <div class="money">{{info.minMoney === 0 && info.maxMoney === 0 ? '薪资面议' : info.money}}</div>
                            <div class="spans">
                                <span>{{info.jobCity_dictText}}</span>
                                <span>{{info.eduLevel_dictText}}</span>
                                <span>{{info.experience}}</span>
                                <span>{{info.needCount}}人</span>
                            </div>
                        </div>
                        <div class="fu">
                            <span v-if="info.enInfoVO.workStart">{{info.enInfoVO.workStart}} - {{info.enInfoVO.workEnd}}</span>
                            <span v-if="info.enInfoVO.rest">{{info.enInfoVO.rest}}</span>
                            <span v-if="info.enInfoVO.workOvertime">{{info.enInfoVO.workOvertime}}</span>
                            <span v-for="(x,y) in info.enInfoVO.otherWelfare" :key="y">{{x}}</span>
                        </div>
                        <div class="date">发布时间：{{
                            $moment(info.createTime, "yyyy-MM-DD HH:mm:ss").format("yyyy-MM-DD")
                            }}
                        </div>
                    </div>
                    <div class="right fr">
                        <el-button type="primary" class="submit" @click="SendResume">投递简历</el-button>
                        <el-button type="text" icon="el-icon-star-off" class="collect" @click="collectionDelete" v-if="collectState==0">取消收藏</el-button>
                        <el-button type="text" icon="el-icon-star-off" class="collect" @click="collectionAdd" v-else>收藏职位</el-button>
                        <div class="cl"></div>
                        <div class="qr">
                            <div id="qrcode"></div>
                            <p>手机端查看该职位</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="block w1200">
                <!-- 左侧 -->
                <div class="left fl">
                    <div class="jobInfo">
                        <div class="section">
                            <div class="title">岗位职责</div>
                            <div class="text" v-html="info.jobDuty"></div>
                        </div>
                        <div class="section">
                            <div class="title">招聘要求</div>
                            <div class="text" v-html="info.jobClaim"></div>
                        </div>
                        <div class="section">
                            <div class="title">公司地址</div>
                              <!-- 20240416 fangsong   因高德地图API收费，去掉所有关于地图的东西  -->
<!--                            <div id="map"></div>-->
<!--                            <div class="address"><i class="el-icon-location-outline"></i>{{info.enInfoVO.enLocation}} <a :href="'https://gaode.com/regeo?lng='+info.enInfoVO.lng+'&lat='+info.enInfoVO.lat+'&name='+info.enInfoVO.enName" target="_blank">查看地图</a></div>-->
                            <div class="address">{{info.enInfoVO.enLocation}}</div>
                        </div>
                    </div>
                    <!-- 该企业其他职位 -->
                    <div class="other" v-if="companyOtherJob.length>0">
                        <div class="bigTitle">该企业其他职位 </div>
                        <div class="list">
                            <router-link :to="{name:'JobDetails',query:{id:item.id}}" target="_blank" class="item" v-for="(item,index) in companyOtherJob" :key="index">
                                <div class="info">
                                    <div class="name">{{item.title}}</div>
                                    <div class="money">{{item.minMoney === 0 && item.maxMoney === 0 ? '薪资面议' : item.money}}</div>
                                    <div class="dsc">
                                        <span>{{item.jobCity_dictText}}</span>
                                        <span>{{item.eduLevel_dictText}}</span>
                                        <span>{{item.experience}}</span>
                                        <span>{{item.needCount}}人</span>
                                    </div>
                                </div>
                            </router-link>
                        </div>
                    </div>
                    <!-- 同类职位推荐 -->
                    <div class="other" v-if="tuijian.length>0">
                        <div class="bigTitle">同类职位推荐 </div>
                        <div class="list">
                            <router-link :to="{name:'JobDetails',query:{id:item.id}}" target="_blank" class="item" v-for="(item,index) in tuijian" :key="index">
                                <div class="info">
                                    <div class="name">{{item.title}}</div>
                                    <div class="money">{{item.minMoney === 0 && item.maxMoney === 0 ? '薪资面议' : item.money}}</div>
                                    <div class="dsc">
                                        <span>{{item.jobCity_dictText}}</span>
                                        <span>{{item.eduLevel_dictText}}</span>
                                        <span>{{item.experience}}</span>
                                        <span>{{item.needCount}}人</span>
                                    </div>
                                    <div class="company">
                                        <div class="text">
                                            <div class="logo"><img :src="item.companyLogo_dictText"></div>
                                            <div class="right">
                                                <div class="companyName">{{item.companyName}}</div>
                                                <div class="companyOther">
                                                    <span>{{item.enNature}}</span>
                                                    <span v-if="item.enPersonnel_dictText">{{item.enPersonnel_dictText}}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="fu">
                                            <span v-for="(x,y) in item.companyBenefits" :key="y">{{x}}</span>
                                        </div>
                                    </div>
                                </div>
                            </router-link>
                        </div>
                    </div>
                </div>
                <!-- 右侧 -->
                <div class="right fr">
                    <!-- 公司介绍 -->
                    <div class="section company">
                        <div class="bigTitle">公司介绍</div>
                        <div class="top">
                            <el-carousel indicator-position="none" trigger="click" :interval='5000'>
                                <el-carousel-item v-for="(item,index) in info.enInfoVO.enPic_dictText" :key="index">
                                    <img :src="item">
                                </el-carousel-item>
                            </el-carousel>
                            <div class="dsc">{{info.enInfoVO.introduce}}</div>
                            <router-link :to="{name:'Company',query:{id:info.enInfoVO.id}}" target="_blank" class="btn">进入企业主页 <i class="el-icon-arrow-right"></i></router-link>
                        </div>
                        <div class="bottom">
                            <div class="logo"><img :src="info.enInfoVO.enLogo_dictText"></div>
                            <div class="text">
                                <div class="name">{{info.enInfoVO.enName}}</div>
                                <div class="other">
                                    <span v-if="info.enInfoVO.enNature">{{info.enInfoVO.enNature}}</span>
                                    <span v-if="info.enInfoVO.enPersonnel">{{info.enInfoVO.enPersonnel}}人</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 看过的职位 -->
                    <div class="section look" v-if="look.length>0">
                        <div class="bigTitle">看过的职位</div>
                        <div class="list">
                            <router-link :to="{name:'JobDetails',query:{id:item.jobId}}" target="_blank" class="item" v-for="(item,index) in look" :key="index" v-show="id!=item.jobId">
                                <div class="title">
                                    <span class="name">{{item.opJob.jobName}}</span>
                                    <span class="money">{{item.opJob.money}}</span>
                                </div>
                                <div class="companyName">{{item.enInfoHideVO.enName}}</div>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
		</div>
		<!-- 底部 -->
		<Footer />
    </div>
</template>

<script>
    import {jobDetails,browseHistory,collectionAdd,collectState,collectionDelete,baseSearch,} from '@/api/api'
	import Header from '@/components/Header.vue'
    import Footer from '@/components/Footer.vue'
    import QRCode from 'qrcodejs2'
	export default {
		//组件注入
		components: {Header,Footer,QRCode},
        //存放数据
        data() {
            return {
                loginStatus: localStorage.getItem('loginStatus'),//登录状态
                id:'',//id
                SendResumeFlag:false,//投递简历
                collectState:1,//收藏状态
                info:{
                    enInfoVO:{
                        enAddress:''
                    }
                },
                companyOtherJob:[],//该企业其他职位
                tuijian:[],
                look:[]
            }
        },
        //接受父组件传递的值
        props:[],
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            //投递简历
            SendResume(){
                if(this.userLoginFlag()){
                    this.$refs.Header.SendResumeFlag = true
                    this.$refs.Header.JobId = this.id
                }
            },
            //收藏职位
            collectionAdd(){
                if(this.userLoginFlag()){
                    collectionAdd({
                        'jobId': this.id
                    }).then(res =>{
                        if(res.code==200){
                            this.$message.success('收藏成功');
                            this.collectState = 0
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                }
            },
            //取消收藏职位
            collectionDelete(){
                if(this.userLoginFlag()){
                    collectionDelete({
                        'id': this.id
                    }).then(res =>{
                        if(res.code==200){
                            this.$message.success('取消收藏成功');
                            this.collectState = 1
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                }
            },
            //生成二维码
            qrcode(){
                console.log(this.mUrl+'JobDetails?id='+ this.id)
                let qrcode = new QRCode('qrcode', {
                    width: 100,
                    height: 100,
                    text: this.mUrl+'JobDetails?id='+ this.id, // 二维码地址
                })
            },
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.id = this.$route.query.id
            //判断登录状态
            if(this.userLoginFlag1()){
                //收藏状态
                collectState({
                    'jobId': this.id
                }).then(res =>{
                    if(res.code==200){
                        this.collectState  = res.result.collectState
                    }
                });
                //看过的职位
                browseHistory({}).then(res =>{
                    if(res.code==200){
                        let list = res.result.records
                        for(let i in list){
                            list[i].opJob.money = list[i].opJob.minMoney/1000 +'K-'+ list[i].opJob.maxMoney/1000 +'K'
                        }
                        this.look = list
                    }
                });
            }
            //职位详情
            jobDetails({
                'id': this.id
            }).then(res =>{
                if(res.code==200){
                    //高德地图
                    /*var infoWindow;
                    var map = new AMap.Map('map', {
                        resizeEnable: true,
                        center: [res.result.enInfoVO.lng,res.result.enInfoVO.lat],
                        zoom:14
                    });
                    var marker = new AMap.Marker({
                        position: [res.result.enInfoVO.lng,res.result.enInfoVO.lat]
                    });
                    map.add(marker);*/
                    //构建信息窗体中显示的内容
                    var info = [];
                    info.push("<h2>"+res.result.enInfoVO.enName+"</h2>");
                    info.push("<p>地址:"+res.result.enInfoVO.enLocation+"</p>");
                    /*infoWindow = new AMap.InfoWindow({
                        content: info.join("")  //使用默认信息窗体框样式，显示信息内容
                    });
                    infoWindow.open(map, map.getCenter());
                    //鼠标点击marker弹出自定义的信息窗体
                    AMap.event.addListener(marker, 'click', function () {
                        infoWindow.open(map, marker.getPosition());
                    });*/
                    this.info = res.result
                    this.info.money = this.info.minMoney/1000 +'K-'+ this.info.maxMoney/1000 +'K'
                    if(this.info.minExperience==0&&this.info.maxExperience==0){
                        this.info.experience = '无经验'
                    }else if(this.info.minExperience==0&&this.info.maxExperience==999){
                        this.info.experience = '不限'
                    }else if(this.info.minExperience==null&&this.info.maxExperience==null){
                        this.info.experience = '无经验'
                    }else{
                        this.info.experience = this.info.minExperience + '-' + this.info.maxExperience + '年'
                    }
                    if(this.info.enInfoVO.enPic_dictText){
                        this.info.enInfoVO.enPic_dictText = this.info.enInfoVO.enPic_dictText.split(',')
                    }
                    if(this.info.enInfoVO.otherWelfare){
                        this.info.enInfoVO.otherWelfare = this.info.enInfoVO.otherWelfare.split(',')
                    }
                    //该企业其他职位
                    baseSearch({
                        'type':'job',
                        'companyId.term': this.info.enInfoVO.id,//搜索内容
                        'pageNo':1,
                        'pageSize':4,
                    }).then(res =>{
                        if(res.code==200){
                            let list = res.result.records
                            for(let i in list){
                                list[i].money = list[i].minMoney/1000 + 'K-' + list[i].maxMoney/1000 + 'K'
                                if(list[i].minExperience==0&&list[i].maxExperience==0){
                                    list[i].experience = '无经验'
                                }else if(list[i].minExperience==0&&list[i].maxExperience==999){
                                    list[i].experience = '不限'
                                }else if(list[i].minExperience==null&&list[i].maxExperience==null){
                                    list[i].experience = '无经验'
                                }else{
                                    list[i].experience = list[i].minExperience + '-' + list[i].maxExperience + '年'
                                }
                            }
                            this.companyOtherJob = list
                        }
                    });
                    //同类职位推荐
                    baseSearch({
                        'type':'job',
                        'title.keywords': this.info.jobName,//搜索内容
                        'pageNo':1,
                        'pageSize':2,
                    }).then(res =>{
                        if(res.code==200){
                            let list = res.result.records
                            for(let i in list){
                                list[i].money = list[i].minMoney/1000 + 'K-' + list[i].maxMoney/1000 + 'K'
                                if(list[i].minExperience==0&&list[i].maxExperience==0){
                                    list[i].experience = '无经验'
                                }else if(list[i].minExperience==0&&list[i].maxExperience==999){
                                    list[i].experience = '不限'
                                }else if(list[i].minExperience==null&&list[i].maxExperience==null){
                                    list[i].experience = '无经验'
                                }else{
                                    list[i].experience = list[i].minExperience + '-' + list[i].maxExperience + '年'
                                }
                            }
                            this.tuijian = list
                        }
                    });
                }else{
                    this.$message.error(res.message);
                }
            });
            //生成二维码
            this.qrcode()
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .JobDetails{background: #F6F6F6;
		.main{height: auto;padding-bottom: 145px;position: relative;z-index: 0;
            .banner{width: 100%;height: 350px;background: url('../../assets/job-bg.jpg') center no-repeat;background-size: cover;padding: 80px 0;
                .left{height: auto;overflow: hidden;
                    .title{font-size: 30px;color: #fff;margin-bottom: 20px;}
                    .other{height: auto;overflow: hidden;line-height: 40px;
                        .money{font-size: 30px;color: #fff;float: left;margin-right: 30px;}
                        .spans{height: auto;overflow: hidden;
                            span{font-size: 14px;color: #fff;position: relative;padding-right: 12px;margin-left: 12px;
                                &:after{content: "";width: 1px;height: 12px;background: #e8e8e8;position: absolute;right: 0;top: 2px;}
                                &:first-child{margin: 0;}
                                &:last-child:after{display: none;}
                            }
                        }
                    }
                    .fu{height: auto;overflow: hidden;margin-top: 15px;
                        span{font-size: 14px;color: #666;border: 1px solid #eee;line-height: 30px;padding: 0 8px;margin: 0 0 8px 8px;border-radius: 3px;background: #F9F9F9;float: left;
                            &:first-child{margin: 0;}
                        }
                    }
                    .date{font-size: 14px;color: #fff;margin-top: 15px}
                }
                .right{height: auto;overflow: hidden;padding-top: 20px;
                    .el-button{float: right;margin-left: 40px;font-size: 16px;color: #fff;
                        i{font-size: 20px;vertical-align: -1px;}
                        &.submit{width: 200px;background: #fff;border-color: #fff;color: #E54437;font-size: 18px;font-weight: bold;}
                    }
                    .qr{height: auto;overflow: hidden;float: right;margin: 30px 40px 0 0;text-align: center;
                        #qrcode{width: 112px;height: 112px;padding: 6px;background: #fff;}
                        p{font-size: 14px;color: #fff;margin-top: 5px;}
                    }
                }
            }
            .block{height: auto;overflow: hidden;margin-top: 30px;
                .left{width: 860px;height: auto;overflow: hidden;
                    .jobInfo{height: auto;overflow: hidden;background: #fff;padding: 30px 50px;
                        .title{font-size: 18px;color: #000;font-weight: bold;margin-bottom: 15px;}
                        .text{height: auto;overflow: hidden;margin-bottom: 20px;font-size: 16px;color: #999;line-height: 30px;white-space: pre-wrap;}
                        #map{height: 350px;margin: 30px auto 20px;
                            .amap-info-content{padding: 10px 25px 10px 10px;
                                h2{font-size: 14px;margin-bottom: 2px;color: #E54437;font-weight: bold;}
                                p{font-size: 14px;color: #666;line-height: 20px;}
                                .amap-info-close{right: 5px !important;}
                            }
                        }
                        .address,.tel{font-size: 16px;color: #999;line-height: 30px;
                            i{font-size: 18px;color: #E54437;vertical-align: -1px;margin-right: 5px}
                            a{font-size: 14px;color: #E54437;margin-left: 10px;cursor: pointer;}
                        }
                    }
                    .other{height: auto;overflow: hidden;margin-top: 40px;
                        .bigTitle{height: 26px;line-height: 26px;font-size: 18px;color: #333;font-weight: bold;position: relative;padding-left: 15px;margin-bottom: 20px;
                            &:before{content: "";width: 4px;height: 18px;background: #E54437;position: absolute;left: 0;top: 4px;}
                        }
                        .list{width: 1215px;height: auto;
                            .item{width: 422px;height: auto;padding: 25px 20px;overflow: hidden;float: left;margin: 0 15px 15px 0;position: relative;background: #fff;cursor: pointer;@include transition();
                                .info{height: auto;overflow: hidden;
                                    .name{width: 60%;font-size: 16px;color: #333;font-weight: bold;@include text-ellipsis();
                                        span{display: inline-block;font-size: 13px;color: #fff;background: #E54437;padding: 1px 5px 2px;vertical-align: 1px;font-weight: normal;margin-left: 10px;border-radius: 3px;}
                                    }
                                    .money{font-size: 20px;color: #E72618;position: absolute;right: 20px;top: 25px;}
                                    .dsc{margin-top: 10px;
                                        span{font-size: 14px;color: #666666;position: relative;padding-right: 12px;margin-left: 12px;
                                            &:after{content: "";width: 1px;height: 12px;background: #e8e8e8;position: absolute;right: 0;top: 2px;}
                                            &:first-child{margin: 0;}
                                            &:last-child:after{display: none;}
                                        }
                                    }
                                    .company{height: auto;overflow: hidden;border-top: 1px solid #f3f3f3;padding-top: 20px;margin-top: 20px;
                                        .text{height: auto;overflow: hidden;
                                            .logo{width: 105px;height: 45px;overflow: hidden;float: left;margin-right: 18px;
                                                img{width: 100%;height: 100%;}
                                            }
                                            .right{width: auto;height: auto;overflow: hidden;
                                                .companyName{font-size: 14px;color: #666;font-weight: bold;@include text-ellipsis()}
                                                .companyOther{margin-top: 5px;
                                                    span{font-size: 13px;color: #999;position: relative;padding-right: 12px;margin-left: 12px;
                                                        &:after{content: "";width: 1px;height: 12px;background: #e8e8e8;position: absolute;right: 0;top: 3px;}
                                                        &:first-child{margin: 0;}
                                                        &:last-child:after{display: none;}
                                                    }
                                                }
                                            }
                                        }
                                        .fu{height: 25px;overflow: hidden;margin: 20px 0 0;
                                            span{font-size: 12px;color: #74767A;border: 1px solid #eee;padding: 2px 8px 3px;margin: 0 0 8px 8px;background: #F9F9F9;float: left;
                                                &:first-child{margin: 0;}
                                            }
                                        }
                                    }
                                }
                                &:hover{box-shadow: 5px 5px 20px rgba(0,0,0,.05);transform: translateY(-2px);}
                            }
                        }
                    }
                }
                .right{width: 310px;height: auto;overflow: hidden;
                    .section{height: auto;overflow: hidden;background: #fff;padding: 25px;margin-bottom: 25px;
                        .bigTitle{height: 26px;line-height: 26px;font-size: 18px;color: #333;font-weight: bold;position: relative;padding-left: 15px;margin-bottom: 25px;
                            &:before{content: "";width: 4px;height: 18px;background: #E54437;position: absolute;left: 0;top: 4px;}
                        }
                        &.company{
                            .top{height: auto;overflow: hidden;border-bottom: 1px solid #f5f5f5;padding-bottom: 20px;margin-bottom: 20px;
                                .el-carousel__container{width: 100%;height: 150px;overflow: hidden;
                                    img{width: 100%;height: 100%;object-fit: cover;}
                                }
                                .dsc{font-size: 14px;line-height: 24px;color: #666666;margin: 10px 0;@include text-ellipsisclamp(4)}
                                .btn{font-size: 14px;color: #EB4C40;cursor: pointer;}
                            }
                            .bottom{height: auto;overflow: hidden;
                                .logo{width: 105px;height: 45px;overflow: hidden;float: left;margin-right: 10px;
                                    img{width: 100%;height: 100%;}
                                }
                                .text{height: auto;overflow: hidden;
                                    .name{font-size: 16px;color: #333;font-weight: bold;@include text-ellipsis()}
                                    .other{height: auto;overflow: hidden;margin-top: 5px;;@include text-ellipsis();
                                        span{font-size: 14px;color: #999;margin-right: 15px;}
                                    }
                                }
                            }
                        }
                        &.look{
                            .list{height: auto;overflow: hidden;
                                .item{height: auto;overflow: hidden;display: block;padding-bottom: 15px;margin-bottom: 15px;border-bottom: 1px dashed #f5f5f5;
                                    .title{height: auto;overflow: hidden;margin-bottom: 5px;line-height: 25px;
                                        .name{width: 175px;font-size: 16px;color: #333;font-weight: bold;float: left;@include text-ellipsis();@include transition()}
                                        .money{font-size: 18px;color: #E72618;float: right;}
                                    }
                                    .companyName{font-size: 14px;color: #666666;}
                                    &:last-child{padding: 0;margin: 0;border: 0;}
                                    &:hover{
                                        .title .name{color: #E54437;}
                                    }
                                }
                            }
                        }
                    }
                }
            }
		}
	}
</style>
